<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="f" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN" class="translated-ltr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="/ua/css/style.css">

    <style>

        a {
            text-decoration: none;
            color: #6b6b6b;
        }

        #entry_code {
            width: 150px;
            text-align: left;
            display: inline
        }

        #entry_send_code {
            width: 50px;
            display: inline;
            outline: 0;
            background-color: rgb(255, 255, 255);
            border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            border: 1px solid rgba(255, 255, 255, .4);
            margin: 0 auto 10px;
            font-size: 15px;
            color: #868686;
            -webkit-transition-duration: .25s;
            transition-duration: .25s;
            font-weight: 300;
            padding-left: 1px;
            padding-right: 1px;
            white-space: nowrap
        }

        .error {
            font-size: .7rem;
            color: #677a8b;
            -moz-appearance: none;
            padding: 8px 15px;
            display: none;
        }

        .info {
            font-size: .7rem;
            color: #677a8b;
            -moz-appearance: none;
            padding: 8px 15px;
            display: none;
        }


    </style>

    <style>
        body {
            background: #eef;
            height: 100vh;
            overflow: hidden;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
        }

        #sky {
            margin-top: -60px;
            -webkit-perspective: 400px;
            perspective: 400px;
            -webkit-filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0px 150px 10px rgba(0, 0, 0, 0.2));
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        #sky div {
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
        }

        #sky .bird {
            -webkit-animation: fly 10000ms linear infinite;
            animation: fly 10000ms linear infinite;
        }

        #sky .bird .wind {
            position: absolute;
            left: 50%;
            width: 4px;
            height: 200px;
            margin-left: -2px;
            border-radius: 999px;
            overflow: hidden;
        }

        #sky .bird .wind:nth-child(1) {
            -webkit-transform: translate3d(-157px, 138px, -68px) rotateY(90deg);
            transform: translate3d(-157px, 138px, -68px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(1)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 90, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1935ms 1233ms linear infinite;
            animation: wind 1935ms 1233ms linear infinite;
        }

        #sky .bird .wind:nth-child(2) {
            -webkit-transform: translate3d(98px, 75px, 2px) rotateY(90deg);
            transform: translate3d(98px, 75px, 2px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(2)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 92, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1048ms 4242ms linear infinite;
            animation: wind 1048ms 4242ms linear infinite;
        }

        #sky .bird .wind:nth-child(3) {
            -webkit-transform: translate3d(181px, 103px, 66px) rotateY(90deg);
            transform: translate3d(181px, 103px, 66px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(3)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 174, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1577ms 4135ms linear infinite;
            animation: wind 1577ms 4135ms linear infinite;
        }

        #sky .bird .wind:nth-child(4) {
            -webkit-transform: translate3d(171px, -100px, 100px) rotateY(90deg);
            transform: translate3d(171px, -100px, 100px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(4)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 209, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1176ms 3610ms linear infinite;
            animation: wind 1176ms 3610ms linear infinite;
        }

        #sky .bird .wind:nth-child(5) {
            -webkit-transform: translate3d(155px, -139px, 45px) rotateY(90deg);
            transform: translate3d(155px, -139px, 45px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(5)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 168, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1154ms 1412ms linear infinite;
            animation: wind 1154ms 1412ms linear infinite;
        }

        #sky .bird .wind:nth-child(6) {
            -webkit-transform: translate3d(61px, 33px, 72px) rotateY(90deg);
            transform: translate3d(61px, 33px, 72px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(6)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 242, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2079ms 4956ms linear infinite;
            animation: wind 2079ms 4956ms linear infinite;
        }

        #sky .bird .wind:nth-child(7) {
            -webkit-transform: translate3d(-61px, 37px, 43px) rotateY(90deg);
            transform: translate3d(-61px, 37px, 43px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(7)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 195, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2506ms 2873ms linear infinite;
            animation: wind 2506ms 2873ms linear infinite;
        }

        #sky .bird .wind:nth-child(8) {
            -webkit-transform: translate3d(-100px, 16px, 70px) rotateY(90deg);
            transform: translate3d(-100px, 16px, 70px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(8)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 66, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1962ms 1394ms linear infinite;
            animation: wind 1962ms 1394ms linear infinite;
        }

        #sky .bird .wind:nth-child(9) {
            -webkit-transform: translate3d(114px, 26px, -30px) rotateY(90deg);
            transform: translate3d(114px, 26px, -30px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(9)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 30, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2489ms 2975ms linear infinite;
            animation: wind 2489ms 2975ms linear infinite;
        }

        #sky .bird .wind:nth-child(10) {
            -webkit-transform: translate3d(-57px, -48px, 33px) rotateY(90deg);
            transform: translate3d(-57px, -48px, 33px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(10)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 124, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 2309ms 3147ms linear infinite;
            animation: wind 2309ms 3147ms linear infinite;
        }

        #sky .bird .wind:nth-child(11) {
            -webkit-transform: translate3d(139px, 107px, 24px) rotateY(90deg);
            transform: translate3d(139px, 107px, 24px) rotateY(90deg);
        }

        #sky .bird .wind:nth-child(11)::before {
            content: '';
            position: absolute;
            width: 4px;
            height: 300px;
            background: rgba(100, 200, 200, 0.3);
            border-radius: 999px;
            -webkit-transform: translateY(-300px);
            transform: translateY(-300px);
            -webkit-animation: wind 1365ms 2503ms linear infinite;
            animation: wind 1365ms 2503ms linear infinite;
        }

        #sky .bird_body {
            position: relative;
            width: 30px;
            height: 40px;
            background: #a7b1d5;
        }

        #sky .bird_head {
            position: absolute;
            top: -30px;
            border-right: 15px solid transparent;
            border-bottom: 30px solid #779dcc;
            border-left: 15px solid transparent;
            -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
            -webkit-transform: rotateX(-20deg);
            transform: rotateX(-20deg);
        }

        #sky .bird_wing_left {
            position: absolute;
            left: -30px;
            height: 30px;
            border-right: 30px solid #a297ff;
            border-bottom: 10px solid transparent;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
            animation: wingLeft 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
        }

        #sky .bird_wing_left_top {
            position: absolute;
            left: -30px;
            border-right: 30px solid #9296de;
            border-bottom: 30px solid transparent;
            -webkit-transform-origin: 100% 0;
            transform-origin: 100% 0;
            -webkit-animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
            animation: wingLeft 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
        }

        #sky .bird_wing_right {
            position: absolute;
            left: 30px;
            height: 30px;
            border-left: 30px solid #8399e6;
            border-bottom: 10px solid transparent;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
            animation: wingRight 1000ms cubic-bezier(0.36, 0.1, 0.16, 1) infinite alternate;
        }

        #sky .bird_wing_right_top {
            position: absolute;
            border-left: 30px solid #bc73e1;
            border-bottom: 30px solid transparent;
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            -webkit-animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
            animation: wingRight 1000ms cubic-bezier(0.545, 0.08, 0.52, 0.975) infinite alternate;
        }

        #sky .bird_tail_left {
            position: absolute;
            top: 40px;
            border-right: 30px solid transparent;
            border-top: 40px solid #c279f7;
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform: rotateX(-20deg);
            transform: rotateX(-20deg);
        }

        #sky .bird_tail_right {
            position: absolute;
            top: 40px;
            border-left: 30px solid transparent;
            border-top: 40px solid #ae79db;
            -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
            -webkit-transform: rotateX(-20deg);
            transform: rotateX(-20deg);
        }

        @-webkit-keyframes fly {
            0% {
                -webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
            }
            100% {
                -webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
            }
        }

        @keyframes fly {
            0% {
                -webkit-transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(0deg) rotateX(10deg);
            }
            100% {
                -webkit-transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
                transform: rotateX(-120deg) rotateZ(360deg) rotateX(10deg);
            }
        }

        @-webkit-keyframes wingLeft {
            0% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
            100% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
        }

        @keyframes wingLeft {
            0% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
            100% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
        }

        @-webkit-keyframes wingRight {
            0% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
            100% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
        }

        @keyframes wingRight {
            0% {
                -webkit-transform: rotateY(40deg);
                transform: rotateY(40deg);
            }
            100% {
                -webkit-transform: rotateY(-40deg);
                transform: rotateY(-40deg);
            }
        }

        @-webkit-keyframes wind {
            0% {
                -webkit-transform: translateY(-300px);
                transform: translateY(-300px);
            }
            100% {
                -webkit-transform: translateY(200px);
                transform: translateY(200px);
            }
        }

        @keyframes wind {
            0% {
                -webkit-transform: translateY(-300px);
                transform: translateY(-300px);
            }
            100% {
                -webkit-transform: translateY(200px);
                transform: translateY(200px);
            }
        }
    </style>


</head>
<body style="">


<div id="sky">
    <div class="bird">
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="wind"></div>
        <div class="bird_body">
            <div class="bird_head"></div>
            <div class="bird_wing_left">
                <div class="bird_wing_left_top"></div>
            </div>
            <div class="bird_wing_right">
                <div class="bird_wing_right_top"></div>
            </div>
            <div class="bird_tail_left"></div>
            <div class="bird_tail_right"></div>
        </div>
    </div>
</div>


<div id="container" style="display: none">
    <div id="output">
        <a style="position: absolute;left: 15px;top: 15px;" href="${rUri}">
            <svg t="1552965196429" class="icon" style="height: 20px;width: 20px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1096"
                 width="200" height="200"><defs><style type="text/css"></style></defs><path d="M398.259 312.832V85.348L0.007 483.503 398.259 881.82V648.502c284.4 0 483.565 91.004 625.735 290.15-56.838-284.472-227.502-568.82-625.735-625.82" fill="#868782" p-id="2556"></path></svg>
        </a>

        <div style="text-align: left" class="containerT">

            <%--@elvariable id="user" type="com.beiding.pojo.auth.UserLocal"--%>
            <f:form class="form" id="entry_form" method="post" modelAttribute="user">

                <f:errors path="username" id="username_error" class="error"/>
                <f:input type="text" placeholder="用户名" id="entry_name" path="username"/>
                <f:errors path="password" id="password_error" class="error"/>

                <div>

                    <style>
                        #entry_password {
                            padding-right: 40px;
                            width: 175px;
                        }

                    </style>

                    <f:input type="password" placeholder="密码" id="entry_password" path="password"/>
                    <div class="eye" style="    height: 30px;width: 30px;display: none;position: fixed;      left: 50%;
    transform: translate(85px, -50px);padding-top: 10px">
                        <svg t="1553093355420" class="close" style="display: block" viewBox="0 0 1024 1024" version="1.1"
                             xmlns="http://www.w3.org/2000/svg" p-id="4519"
                             width="20" height="20">
                            <defs>
                                <style type="text/css"></style>
                            </defs>
                            <path d="M1017.62111 332.725c10.989-16.478 7.326-38.455-7.324-51.277-16.483-12.817-38.455-9.156-51.277 7.328-1.833 1.833-205.103 241.73-446.834 241.73-234.404 0-446.835-241.73-448.663-243.564-12.822-14.65-36.627-16.478-51.277-3.661-14.65 12.817-16.483 36.627-3.666 51.277 3.666 5.494 47.616 54.938 117.204 109.877l-93.399 97.06c-14.65 14.65-12.817 38.455 1.833 51.272 3.666 7.328 12.822 10.989 21.977 10.989 9.156 0 18.311-3.661 25.639-10.989l100.721-104.382c47.611 32.966 104.382 64.099 166.643 86.071l-38.455 130.022c-5.494 20.144 5.494 40.288 25.639 45.783h10.989c16.479 0 31.129-10.989 34.794-27.472l38.456-130.022c29.3 5.494 60.433 9.161 91.565 9.161 31.128 0 62.261-3.666 91.565-9.161l38.455 128.194c3.661 16.483 20.144 27.467 34.794 27.467 3.661 0 7.328 0 9.156-1.828 20.144-5.494 31.133-25.639 25.638-45.783L673.34111 572.622c62.266-21.977 119.032-53.105 166.648-86.071l98.888 102.554c7.328 7.322 16.483 10.989 25.639 10.989 9.156 0 18.311-3.666 25.635-10.989 14.65-14.65 14.65-36.622 1.832-51.277l-93.393-97.055c75.082-54.943 119.037-108.048 119.037-108.048h-0.006z m0 0"
                                  p-id="4520" fill="#707070"></path>
                        </svg>

                        <svg t="1553097468060" class="open" style="display: none" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2553"
                             width="22.8515625" height="20"><defs><style type="text/css"></style></defs><path d="M423.107048 516.778667c0 74.605714 63.24419 135.265524 141.06819 135.265523 77.872762 0 141.116952-60.611048 141.116952-135.265523v-1.121524a83.870476 83.870476 0 0 1-58.806857 23.698286c-45.348571 0-82.310095-35.401143-82.310095-78.896762 0-31.353905 19.260952-58.61181 46.811429-71.241143a144.969143 144.969143 0 0 0-46.811429-7.655619c-77.824 0-141.06819 60.611048-141.06819 135.216762z m673.889523-76.848762c-87.430095-106.642286-300.470857-283.794286-532.577523-283.794286-232.301714 0-445.586286 177.152-533.065143 283.794286-19.748571 24.380952-30.573714 50.712381-31.256381 76.848762 0.682667 26.185143 11.50781 52.565333 31.256381 76.897523 87.478857 106.593524 300.519619 283.794286 532.821333 283.794286 232.350476 0 445.391238-177.200762 532.870095-283.794286 19.992381-24.380952 30.768762-50.712381 31.500191-76.897523-0.731429-26.136381-11.50781-52.516571-31.500191-76.848762z m-532.821333 302.323809c-129.755429 0-235.129905-101.034667-235.129905-225.475047 0-124.391619 105.325714-225.377524 235.129905-225.377524s235.178667 100.937143 235.178667 225.377524-105.325714 225.426286-235.178667 225.426285z" p-id="2554" fill="#707070"></path><path d="M16.530286 469.187048a45.348571 45.348571 0 0 0 7.94819 57.539047c17.846857 14.384762 41.691429 10.288762 55.588572-8.192 1.999238-2.096762 222.500571-271.408762 484.693333-271.408762 254.244571 0 484.693333 271.408762 486.643809 273.456762a39.350857 39.350857 0 0 0 55.588572 4.096 42.76419 42.76419 0 0 0 3.998476-57.539047c-3.949714-6.192762-51.687619-61.732571-127.122286-123.367619l101.278477-108.982858a40.71619 40.71619 0 0 0-1.950477-57.587809c-3.998476-8.240762-13.897143-12.336762-23.893333-12.336762a38.570667 38.570667 0 0 0-27.794286 12.336762l-109.226666 117.174857a764.879238 764.879238 0 0 0-180.760381-96.597333l41.74019-145.993143c5.948952-22.625524-5.948952-45.251048-27.794286-51.395048h-11.946666a38.521905 38.521905 0 0 0-37.741714 30.817524l-41.691429 145.993143a525.458286 525.458286 0 0 0-99.328-10.24c-33.792 0-67.535238 4.096-99.328 10.24L423.740952 33.255619A40.277333 40.277333 0 0 0 385.999238 2.438095c-3.998476 0-7.94819 0-9.947428 2.048-21.845333 6.192762-33.743238 28.769524-27.794286 51.395048l41.691428 143.945143A764.928 764.928 0 0 0 209.188571 296.472381l-107.27619-115.175619a38.570667 38.570667 0 0 0-27.794286-12.336762 38.570667 38.570667 0 0 0-27.794285 12.336762A42.715429 42.715429 0 0 0 44.373333 238.933333l101.278477 108.982857C64.219429 409.551238 16.530286 469.187048 16.530286 469.187048z" p-id="2555" fill="#707070"></path></svg>
                    </div>


                </div>




                <f:errors path="email" id="email_error" class="error"/>
                <f:input type="text" placeholder="安全邮箱" id="entry_email" path="email"/>


                <div id="box" style="width: max-content;display: none;width: -moz-max-content;">
                    <div style="padding: 0px 15px;">
                        <div style="width: 200px;display: inline">
                            <input style="display: inline-block" type="text" placeholder="验证码" id="entry_code"
                                   name="code"/>
                            <button style="display: inline-block" type="button" id="entry_send_code">
                                获取
                            </button>
                        </div>
                    </div>
                </div>
                <div style="width: 100%;text-align: center">

                    <button type="button" id="entry_btn"><font style="vertical-align: inherit;"><font
                            style="vertical-align: inherit;">注册</font></font></button>
                    <div id="prompt" class="prompt"></div>

                    <p class="view-clause">注册即表示同意<a style="color: cornflowerblue;" href="#">《用户隐私条款》</a></p>
                </div>

            </f:form>
        </div>
    </div>
</div>

<%--

<label id="ab=c" class="error">这是元素A</label>
<label id="abc" class="error">哈哈哈哈哈哈哈</label>
--%>


<script type="text/javascript" src="//cdn.staticfile.org/jquery/2.1.0/jquery.js"></script>


<script type="text/javascript">


    $('#container').fadeIn(300);


    $('#entry_password').bind('input', function (event) {

        if (event.target.value.length) {
            $('.eye').show();
        } else {
            $('.eye').hide();


            $('#entry_password').attr('type', 'password');

            //切换图标
            $('.eye .open').hide();

            $('.eye .close').show();

            flag = false;

        }

    });

    let flag = false;

    $('.eye').click(function () {

        if (flag) {

            $('#entry_password').attr('type', 'password');

            //切换图标
            $('.eye .open').hide();

            $('.eye .close').show();

            flag = false;


        } else {

            //如果不可见
            //变为可见
            $('#entry_password').attr('type', 'text');

            //切换图标
            $('.eye .close').hide();

            $('.eye .open').show();

            flag = true;

        }

    });


    $(function () {

        //显示结果

        let entryName = $("#entry_name");

//        entryName.focus();

        $(document).keydown(function (event) {
            if (event.keyCode === 13) {
                $("#entry_btn").click();
            }
        });


        let emailRegex = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;

        let usernameRegex = /^[a-zA-Z][a-zA-Z0-9]{4,11}$/;

        let passwordRegex = /^[a-zA-Z0-9]{5,15}$/;

        let codeRegex = /^[0-9]{6}$/;


        let errorMap = {};

        let showMap = {};

        function removeLabel(forInput) {

            if (errorMap[forInput]) {

                if (showMap[forInput]) {
                    errorMap[forInput].slideUp();
                    showMap[forInput] = false;
                }
            }

        }

        function addLabel(forInput, msg) {


            if (errorMap[forInput] == null) {
                $('#' + forInput).before('<label for="entry_name" id="' + forInput + '_error" class="error">' + msg + '</label>');
                let error = $('#' + forInput + '_error');
                errorMap[forInput] = error;
                error.slideDown();
                showMap[forInput] = true;

            } else if (errorMap[forInput].text() !== msg) {

                $('#' + forInput + '_error').remove();
                $('#' + forInput).before('<label for="entry_name" id="' + forInput + '_error" class="error">' + msg + '</label>');
                let error = $('#' + forInput + '_error');
                errorMap[forInput] = error;
                error.slideDown();
                showMap[forInput] = true;

            } else {
                if (!showMap[forInput]) {
                    errorMap[forInput].slideDown();
                    showMap[forInput] = true;
                }

            }

        }


        <c:if test="${not empty username_error}">
        addLabel('entry_name', ' ${username_error}');
        </c:if>


        <c:if test="${not empty code_error}">
        addLabel('box', '${code_error}');
        $('#box').slideDown();
        </c:if>


        entryName.bind("input", function (event) {
            if (event.target.value !== "" && !usernameRegex.test(event.target.value)) {
                addLabel("entry_name", '由字母数字组成且字母开头,5至12位');
            } else {
                removeLabel("entry_name");
            }
        });


        let entryPassword = $("#entry_password");

        entryPassword.bind("input", function (event) {

            if (event.target.value !== "" && !passwordRegex.test(event.target.value)) {
                addLabel('entry_password', '由字母数字组成,5至15位');
            } else {
                removeLabel('entry_password');
            }
        });

        let entryEmail = $("#entry_email");


        entryEmail.bind("input", function (event) {
            if (event.target.value !== "" && !emailRegex.test(event.target.value)) {
                addLabel('entry_email', '请输入正确格式的邮箱');
                $('#box').slideUp();
            } else {
                removeLabel('entry_email');
                if (event.target.value !== "") {
                    $('#box').slideDown();
                }
            }
        });


        let entryCode = $("#entry_code");

        entryCode.bind("input", function (event) {
            if (event.target.value !== "" && !codeRegex.test(event.target.value)) {
                addLabel('box', '必须是六位数字');
            } else {
                removeLabel('box');
            }
        });

        $("#entry_btn").click(function () {
            let data = {};
            let form = $('#entry_form');
            $.each(form.serializeArray(), function () {
                data [this.name] = this.value;
            });
            if (usernameRegex.test(data['username']) && passwordRegex.test(data['password']) && emailRegex.test(data['email']) && codeRegex.test(data['code'])) {
                form.submit();
            } else {


                if (data['username'] === '') {
                    addLabel('entry_name', '未输入');

                }


                if (data['password'] === '') {
                    addLabel('entry_password', '未输入');

                }

                if (data['email'] === '') {
                    addLabel('entry_email', '未输入');

                }

                if (data['code'] === '') {
                    addLabel('box', '未输入');
                }


            }


        });


        //点击获取验证码按钮
        let send = $("#entry_send_code");

        let emailInput = entryEmail;

        send.click(function () {

            $("#code_error").remove();

            let emailT = emailInput.val();

            if (emailRegex.test(emailT)) {

                $("#email_error").remove();


                //发起post请求获取验证码
                $.post("sendCode", {email: emailT}, function () {
                    emailInput.before('<label for="entry_email" id="email_info" class="info">邮件已发送</label>');

                    //按钮不可用
                    send.attr("disabled", true);

                    //开始计时
                    let sec = 60;
                    send.text(sec + "s");
                    timer = setInterval(function () {
                        sec--;
                        send.text(sec + "s");

                        if (sec === 50) {
                            $("#email_info").slideUp(function () {
                                this.remove();
                            });
                        }

                        if (sec === 0) {
                            clearTimeout(timer);
                            send.text("获取");
                            send.attr("disabled", false);

                        }
                    }, 1000);


                    $("#email_info").slideDown();

                }).error(function (r) {

                    alert(r.responseText);

                });

            }

        });

    });
</script>


</body>
</html>